<template>
	<view  class="content">
		<view style="padding: 40rpx 0 40rpx 20vw">
		  <subsection
		    :width="'60vw'"
		    :height="'60rpx'"
		    :selectIndex="type"
		    :itemList="['管桥', '架空管道']"
		    @selected="changeType"
		  />
		</view>
		<!-- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">管桥</view>
		</view> -->
		<scroll-view v-show="!type" scroll-y class="scroll">
			<view class="wrap" style="background: rgb(229,238,217);">
				<view>地点</view>
				<view>正常值(mm)</view>
				<view>位移值(mm)</view>
				<view>一级</view>
				<view>二级</view>
				<view>三级</view>
			</view>
			<view class="wrap" v-for="item,index in data" :style="{borderWidth:'0rpx',backgroundColor:index%2==1?'#FAFAFA':'white'}">
				<view>{{item.sbmc}}</view>
				<view>{{item.czz}}</view>
				<view>{{changeNum(item.relativeDiff)}}</view>
				<view style="color: #F5C06DFF;">{{NP.times(item.czz,1.1)}}</view>
				<view style="color: #ff6d41;">{{NP.times(item.czz,1.2)}}</view>
				<view style="color: red;">{{NP.times(item.czz,1.5)}}</view>
			</view>
			<view style="height: 200rpx;"/>
		</scroll-view>	
		<scroll-view v-show="type" scroll-y class="scroll">
			<view class="wrap" style="background: rgb(229,238,217);">
				<view>名称</view>
				<view>时间</view>
				<view>位移值(mm)</view>
				<view>X轴偏移(mm)</view>
				<view>Y轴偏移(mm)</view>
				<view>H轴偏移(mm)</view>
			</view>
			<view class="wrap" v-for="item,index in qzyList" :style="{borderWidth:'0rpx',backgroundColor:index%2==1?'#FAFAFA':'white'}">
				<view>{{item.name}}</view>
				<view>{{Util.getTimeStr(item.epoch).replace(/-/g, "/")}}</view>
				<view>{{Number(item.v).toFixed(2)}}</view>
				<view>{{Number(item.dX).toFixed(2)}}</view>
				<view>{{Number(item.dY).toFixed(2)}}</view>
				<view>{{Number(item.dH).toFixed(2)}}</view>
			</view>
			<view style="height: 200rpx;"/>
		</scroll-view>	
	</view>
</template>

<script>
	import API from '@/common/api.js';
	import Util from '@/common/util.js';
	import flipcountdown from '@/components/flipcountdown-uni/flipcountdown-uni.vue'
	import subsection from "@/components/subsection/subsection.vue";
	import NP from "number-precision";
	var _self = null;
	export default {
		components: {
			flipcountdown,subsection
		},
		data() {
			return {
				Util:Util,
				NP:NP,
				pzhAuthorization: uni.getStorageSync('pzhAuthorization'),
				type:0,
				data:[],
				qzyList:[],
				timer: null,
			}
		},
		onLoad(options) {
			_self = this
			this.socket()
		},
		onUnload() {
			clearInterval(this.timer)
			uni.closeSocket()
		},
		methods: {
			changeType(type){
				this.type=type
				if(this.type){
					this.getQzy()
				}
			},
			getQzy(){
				API.getQzy().then(res=>{
					if(res.resCode=="success"){
						this.qzyList=res.datas
					}
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			socket() {
				uni.connectSocket({
					url: 'wss://125.66.234.97:8443/panzhihua/WebSocketTarget?pzhAuthorization=' + this.pzhAuthorization
				});
				uni.onSocketOpen((res) => {
					console.log('WebSocket连接已打开！');
					uni.sendSocketMessage({
						data: "getWyCurrentVlaue()"
					})
					this.timer = setInterval(() => {
						if(!this.type){
							uni.sendSocketMessage({
								data: "getWyCurrentVlaue()"
							})
						}
					}, 5000)
				});
				uni.onSocketMessage((res) => {
					let obj = JSON.parse(res.data)
					this.data=JSON.parse(obj.datas).map(item=>{
						item.czz=item.pointName == "GPS-MD02-24H"?300:(item.pointName == "GPS-MD01-24H" || item.pointName == "GPS-MD03-24H")?50:30
						return item
					})
                    if(obj.functionCode!='getWyCurrentVlaue'){
                        return 
                    }
					// obj.datas.forEach((item, index) => {
					// 	if (index % 3 == 0) {
					// 		let data = {
					// 			name: item.sbmc.substring(item.sbmc.indexOf('#') + 1, item.sbmc.length),
					// 			lj: this.changeNum(item.value),
					// 			ss: this.changeNum(obj.datas[index + 1].value),
					// 			tjf: this.changeNum(obj.datas[index + 2].value)
					// 		}
					// 		this.data.push(data)
							
					// 	}
					// })

				});
			},
			changeNum(num) {
				return Number(Math.floor(Number(num) * 100) / 100).toFixed(2)
			}
		}
	}
</script>
<style scoped>
	/* #ifndef H5 */
	.content>>>.xdsoft_flipcountdown>.xdsoft_digit {
		transition-property: background-position;
		transition-duration: 0.5s;
	}

	/* #endif */
</style>
<style lang="less" scoped>
	.content {
		background: white;
		height: 100vh;
		.wrap {
			display: flex;
			text-align: center;
			border-top: 2rpx solid #dcdfe6;
			border-bottom: 2rpx solid #dcdfe6;
			flex-wrap: wrap;
			view {
				font-size: 26rpx;
				padding: 10rpx 0;
				width: 16.666vw;
				display: flex;
				line-height: 40rpx;
				flex-direction: column;
				justify-content: center;
			}
		}

		.scroll {
			height: calc(100vh - 140rpx);
			view {
				color: #777777;
				border-bottom: 2rpx solid #dcdfe6;
			}
		}

		.qiun-common-mt {
			margin-top: 10upx;
		}

		.qiun-bg-white {
			background: #FFFFFF;
		}

		.qiun-title-bar {
			width: 96%;
			padding: 10upx 2%;
			flex-wrap: nowrap;
		}

		.qiun-title-dot-light {
			border-left: 10upx solid #0ea391;
			padding-left: 10upx;
			font-size: 32upx;
			color: #000000
		}
	}
</style>
